import React, { Component } from 'react'

class Box extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        // 上次选中的和本次选中的
        if(this.props.current === this.props.index || nextProps.current === nextProps.index) {
            return true
        }
        return false
    }
    render() {
        console.log("render")
        return (
            <div style={{ width: '100px', height: '100px', margin: '15px', float: 'left', border: this.props.current === this.props.index ? '3px solid red' : '1px solid gray' }}>

            </div>
        )
    }
}

export default class App extends Component {
    state = {
        list: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
        current: -1
    }
    render() {
        return (
            <div>
                <input type='number' onChange={(evt) => {
                    this.setState({ current: Number(evt.target.value) })
                }} />
                <div>
                    {
                        this.state.list.map((item, index) => (
                            <Box key={item} current={this.state.current} index={index} />
                        ))
                    }
                </div>
            </div>
        )
    }
}
